<template>
	<z-paging ref="paging" class="paging" defaultPageSize='30' v-model="dataList" @query="getIndex">
		<!-- <u-navbar bgColor="#0065FF" titleStyle="color:#fff;" leftIconColor="#fff" title="竞标记录" autoBack placeholder></u-navbar> -->
		<view class="content">
			<view class="header">
				<text>标名</text>
				<text>竞标时间</text>
				<text>竞标状态</text>
			</view>
			<view class="list">
				<view class="item" @click="onDetail(item)" v-for="(item, index) in recordList" :key="index">
					<text>{{ item.projectName }}</text>
					<text>{{ item.createTime }}</text>
					<text :class="[item.status == 0 ? 'status_0' : item.status == 1 ? 'status_1' : 'status_2']">
						{{ item.status | statusFilter }}
					</text>
				</view>
				<!-- <u-loadmore :status="status" /> -->
			</view>
		</view>
	</z-paging>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				page: 1,
				limit: 20,
				total: 0,
				recordList: []
			};
		},
		onReachBottom() {
			if (this.status == 'loadmore') {
				this.page++;
			}
		},
		onLoad() {},
		filters: {
			statusFilter(e) {
				const info = {
					0: '竞标中',
					1: '竞标失败',
					2: '竞标成功',
					3: '已作废'
				};
				return info[e];
			}
		},
		methods: {
			getIndex(page, size) {
				if (page == 1) {
					this.recordList = []
				}
				this.$api.seeProjectLog({
					pageNum: page,
					pageSize: size
				}).then((response) => {
					this.recordList.push(...response.rows)
					this.$refs.paging.complete(response.rows);
				})
				return
				// const { data } = await this.$api.projectLogIndex({
				// 	page:this.page,limit:this.limit,
				// });
				// this.recordList.push(...data.project_log.data);
				// if (this.recordList.length>=data.project_log.total) {
				// 	this.status = 'nomore'
				// 	// return
				// } else {
				// 	this.status = 'loadmore'
				// }
				// this.recordList.push(...data.project_log.data);
				// this.recordList.length >= data.project_log.total ? (this.status = 'nomore') : (this.status = 'loadmore');
			},
			onDetail(e) {
				if (e.status == 0) {
					return
				}
				uni.navigateTo({
					url: `/pagesB/project/companyLog?projectId=${e.projectId}&projectName=${e.projectName}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.header {
		padding: 10rpx 20rpx;
		position: fixed;
		width: 100%;
		background-color: #f8f8f8;
		display: flex;
		font-size: 26rpx;
		font-weight: bold;
		box-sizing: border-box;

		>text:nth-of-type(1) {
			width: 40%;
		}

		>text:nth-of-type(2) {
			width: 40%;
		}

		>text:nth-of-type(3) {
			width: 20%;
		}
	}

	.list {
		padding: 60rpx 20rpx;

		.item {
			display: flex;
			font-size: 26rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx dotted #ddd;

			>text:nth-of-type(1) {
				width: 40%;
			}

			>text:nth-of-type(2) {
				width: 40%;
			}

			>text:nth-of-type(3) {
				width: 20%;
			}

			.status_0 {
				color: #999;
			}

			.status_1 {
				color: #f56c6c;
			}

			.status_2 {
				color: #5ac725;
			}
		}
	}
</style>